<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Get请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 2px red;
        }
    </style>
</head>
<body>
   
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>

        function sendAjax(){
            return new Promise((resolve,reject)=>{
                let xhr = new XMLHttpRequest()
                xhr.open('GET','http://localhost:8000/server')
                /**
                 * Ajax GET方式添加参数如下，直接在请求url后面进行添加
                 *              添加 a=10  b=20 这两个参数
                 *   xhr.open('GET','http://localhost:8000/server?a=10&b=20')
                 */
                xhr.send()
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState == 4){
                        if(xhr.status >= 200 && xhr.status <=300){
                            
                            resolve(xhr.response)
                        }
                    }
                }   
            })
        }

        

        let btn = document.getElementsByTagName('button')[0]
        btn.onclick = async function(){
            let res = await sendAjax()

            var div = document.getElementById('result')
            div.innerHTML = res


        }




    </script>
    
</body>
</html>